<template>
	<view class="ranking-container page-container">
		<!-- 时间筛选栏 -->
		<view class="time-filter-bar">
			<view class="filter-tabs">
				<view class="filter-tab" v-for="(tab, index) in timeTabs" :key="index"
					:class="{ active: currentTimeFilter === tab.value }" @click="selectTimeFilter(tab.value)">
					<text class="tab-text">{{ tab.label }}</text>
				</view>
			</view>
		</view>

		<!-- 排序切换 -->
		<view class="sort-switch">
			<view class="sort-option" :class="{ active: sortType === 'sales' }" @click="switchSort('sales')">
				<text class="sort-text">销量排行</text>
			</view>
			<view class="sort-option" :class="{ active: sortType === 'amount' }" @click="switchSort('amount')">
				<text class="sort-text">销售额排行</text>
			</view>
		</view>

		<!-- 排行榜列表 -->
		<view class="ranking-list">
			<view class="ranking-item" v-for="(item, index) in salesData" :key="item.sku_id"
				@click="toProductDetail(item)">
				<!-- 排名标识 -->
				<view class="rank-badge"
					:class="{'rank-first': index === 0, 'rank-second': index === 1, 'rank-third': index === 2,'rank-normal': index > 2}">
					<text class="rank-number">{{ index + 1 }}</text>
				</view>

				<!-- 商品信息 -->
				<view class="product-info">
					<image :src="$tools.buildUrl(item.main_image)" mode="aspectFill" class="product-image"></image>
					<view class="product-details">
						<text class="product-name">{{ item.spu_name }}</text>
						<text class="product-spec">{{ item.sku_name }}</text>
						<view class="product-price">
							<text class="price-label">售价：</text>
							<text class="price-value">¥{{ item.unit_price }}</text>
						</view>
					</view>
				</view>

				<!-- 销售数据 -->
				<view class="sales-data">
					<view class="data-item" v-if="sortType === 'sales'">
						<text class="data-label">销量</text>
						<text class="data-value">{{ item.quantity }}</text>
					</view>
					<view class="data-item" v-if="sortType === 'amount'">
						<text class="data-label">销售额</text>
						<text class="data-value">¥{{ item.total_amount }}</text>
					</view>
					<view class="data-item secondary">
						<text class="data-label">{{ sortType === 'sales' ? '销售额' : '销量' }}</text>
						<text
							class="data-value secondary">{{ sortType === 'sales' ? '¥' + item.total_amount : item.quantity }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="salesData.length === 0" class="empty-state">
			<text class="empty-icon">📊</text>
			<text class="empty-title">暂无销售数据</text>
			<text class="empty-desc">{{ getEmptyDesc() }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前时间筛选
				currentTimeFilter: 'month',
				// 排序类型：sales-销量，amount-销售额
				sortType: 'sales',
				// 时间筛选选项
				timeTabs: [{
						label: '本周',
						value: 'week'
					},
					{
						label: '本月',
						value: 'month'
					},
					{
						label: '本季度',
						value: 'quarter'
					},
					{
						label: '本年',
						value: 'year'
					}
				],
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				salesData: []
			}
		},
		onLoad(options) {
			if (options.currentTimeFilter) {
				this.currentTimeFilter = options.currentTimeFilter
			}
			if (options.sortType) {
				this.sortType = options.sortType
			}
			this.onSearch()
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.salesData = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.salesData = []
				this.loadDataList()
			},
			loadDataList() {
				if (this.hasSearched) {
					return false
				}
				this.hasSearched = true
				this.$api.agent.ProductSaleRanking({
					page: this.page,
					limit: this.limit,
					dateType: this.currentTimeFilter,
					sortType: this.sortType
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.salesData = this.salesData.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 选择时间筛选
			selectTimeFilter(value) {
				this.currentTimeFilter = value
				this.onSearch()
			},

			// 切换排序类型
			switchSort(type) {
				this.sortType = type
				this.onSearch()
			},

			// 跳转到商品详情
			toProductDetail(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				})
			},

			// 获取空状态描述
			getEmptyDesc() {
				const timeMap = {
					week: '本周',
					month: '本月',
					quarter: '本季度',
					year: '本年'
				}
				return `${timeMap[this.currentTimeFilter]}暂无销售数据`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ranking-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 时间筛选栏 */
	.time-filter-bar {
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.filter-tabs {
		display: flex;
		gap: 10rpx;
	}

	.filter-tab {
		flex: 1;
		height: 60rpx;
		background-color: #f8f9fa;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid transparent;
	}

	.filter-tab.active {
		background-color: #e8f5e8;
		border-color: #52a58a;
	}

	.tab-text {
		font-size: 26rpx;
		color: #333;
	}

	.filter-tab.active .tab-text {
		color: #52a58a;
		font-weight: 600;
	}

	/* 排序切换 */
	.sort-switch {
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		gap: 10rpx;
	}

	.sort-option {
		flex: 1;
		height: 60rpx;
		background-color: #f8f9fa;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid transparent;
	}

	.sort-option.active {
		background-color: #e8f5e8;
		border-color: #52a58a;
	}

	.sort-text {
		font-size: 26rpx;
		color: #333;
	}

	.sort-option.active .sort-text {
		color: #52a58a;
		font-weight: 600;
	}

	/* 排行榜列表 */
	.ranking-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.ranking-item {
		background-color: white;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	/* 排名标识 */
	.rank-badge {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.rank-first {
		background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	}

	.rank-second {
		background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
	}

	.rank-third {
		background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
	}

	.rank-normal {
		background-color: #f8f9fa;
	}

	.rank-number {
		font-size: 28rpx;
		font-weight: 700;
		color: white;
	}

	.rank-normal .rank-number {
		color: #666;
	}

	/* 商品信息 */
	.product-info {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.product-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.3;
	}

	.product-spec {
		font-size: 24rpx;
		color: #666;
	}

	.product-price {
		display: flex;
		align-items: center;
		gap: 5rpx;
	}

	.price-label {
		font-size: 24rpx;
		color: #666;
	}

	.price-value {
		font-size: 26rpx;
		font-weight: 600;
		color: #52a58a;
	}

	/* 销售数据 */
	.sales-data {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8rpx;
		flex-shrink: 0;
	}

	.data-item {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4rpx;
	}

	.data-label {
		font-size: 22rpx;
		color: #666;
	}

	.data-value {
		font-size: 28rpx;
		font-weight: 700;
		color: #52a58a;
	}

	.data-item.secondary .data-label {
		font-size: 20rpx;
		color: #999;
	}

	.data-item.secondary .data-value {
		font-size: 24rpx;
		font-weight: 500;
		color: #999;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
		text-align: center;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}

	.empty-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
</style>